import React, { Component } from 'react';

import { Router, Route, Switch } from 'react-router-dom';
// BrowserRouter = Router + history
// import Login from './pages/Login';
// import Layout from './pages/Layout';
import AuthRoute from 'components/AuthRoute';
import history from 'utils/history';

// import Test from 'pages/Test';

// 总结：
// React懒加载
// 本质上： 异步路由
// 默认情况下，访问页面所有的代码，都会一次性加载回来
// 问题：当组件代码多了之后，一次性加载会导致页面卡段
// 解决办法：异步路由
// 效果：
// 1. 当第一次访问时，才加载代码
// 2.未访问时，不会加载代码

// 使用步骤：
// 1. 使用React.lazy去导入页面组件

// 2. 使用React.Suspense去包裹住Switch路由
// 💥记得设置过渡动画fallback

const Login = React.lazy(() => import('pages/Login'));
const Layout = React.lazy(() => import('pages/Layout'));
const Test = React.lazy(() => import('pages/Test'));

export default class App extends Component {
  render() {
    return (
      <Router history={history}>
        <React.Suspense fallback={<div>...加载中</div>}>
          <Switch history={history}>
            <Route path="/login" component={Login}></Route>
            <Route path="/test" component={Test}></Route>
            <AuthRoute path="/" component={Layout}></AuthRoute>
          </Switch>
        </React.Suspense>
      </Router>
    );
  }
}
